<template>
  <CommonPage
    :scroll-props="{ onPulldown, height: '100%' }"
    :content-props="{ color: '#F2F2F2' }"
    :lock="true"
    title="我的收藏"
    custom-class="my-collect"
  >
    <div class="my-collect__content">
      <template v-if="collectList.length">
        <CommonScroll>
          <div class="my-collect__content-list">
            <CollectItem
              v-for="item in collectList"
              :key="item.id"
              :data="item"
              @tap="onSelect(item.id)"
            />
          </div>
        </CommonScroll>
      </template>

      <template v-else>
        <CommonEmpty label="暂无收藏内容" />
      </template>
    </div>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/common-page/with-navigateBar-page.vue";
import CommonScroll from "@/components/common-scroll/index.vue";
import CommonEmpty from "@/components/common-empty/index.vue";
import CollectItem from "./components/collect-item.vue";
import Taro, { useDidShow } from "@tarojs/taro";
import { apiQueryMyCollectArticle } from "@/apis/knowledge";
import { ResponseCodeEnum } from "@/constants/index";
import { ref } from "vue";
import { ICollectArtical } from "@/apis/types/home";
defineOptions({
  name: "my-collect",
});

const collectList = ref<ICollectArtical[]>([]);
useDidShow(() => {
  queryArticalCollectServer();
});

const onPulldown = async (done: Function) => {
  try {
    await queryArticalCollectServer();
  } catch (error) {
  } finally {
    done();
  }
};

const onSelect = (id: number) => {
  Taro.navigateTo({
    url: `/packageA/pages/knowledge-detail/index?id=${id}`,
  });
};

const queryArticalCollectServer = () => {
  apiQueryMyCollectArticle().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      collectList.value = data;
    }
  });
};
</script>

<style lang="less">
.my-collect {
  height: 100%;
  &__content {
    width: 100%;
    height: 100%;
    padding-top: 24px;
    box-sizing: border-box;
  }
}
</style>
